
<template>
 <div>
    <el-row>
      <el-col :span="24" style="height: 80vh">
        <CesiumMap ref="cesiumMap" :tileSet="tileSet"></CesiumMap>
      </el-col>
    </el-row>
  </div>
</template>
    
  
<script>

import CesiumMap from "../cesiumMap/index.vue";
let viewer = null;

export default {
  components: { CesiumMap },
  data() {
    return {
      tileSet: {
      },
      homeCameraView: {
        longitude: 117.28886022164883,
        latitude: 31.451717348795132,
        height: 55465.26169812524,
        heading: 359.31729907269107,
        pitch: -55.72672188549485,
        roll: 359.979088652007,
      }
    }
  },
  methods: {
    addEntities: function () {

      let points = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection);

      let r = new Cesium.Color.fromCssColorString("#00CCFF").withAlpha(.6);
      let s = [117.292179, 31.81959, 15.39];
      for (let i = 0; i < 10000; ++i) {
        const e = s[0] + .5 * Math.random() * (Math.random() > .5 ? -1 : 1);

        const i = s[1] + .5 * Math.random() * (Math.random() > .5 ? -1 : 1);
        const o = 10000 * Math.random();

        let p = Cesium.Cartesian3.fromDegrees(e, i, o)
        points.add({
          pixelSize: 10,
          color: r,
          position: p
        })
      }


    },

  },
  setup() {
    return {
    };
  },

  mounted() {
    viewer = this.$refs.cesiumMap.viewer;
    viewer.imageryLayers.removeAll();
    this.$refs.cesiumMap.loadTianditu();


    this.addEntities();
  },
};
</script>
  
<style scoped>
#cesiumContainer {
  height: 100%;
  width: 100%;
  margin: 0;
}
</style>
  